<template>
	<view class="wrap">
		<u-navbar :title="$t('index.apigl')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="cell">
				<view class="title">{{$t('cjapiqgx')}}</view>
				<!-- <view class="copy">
					<text class="copy-text">{{ bindIP }}</text>
					<text @tap="$utils.copy(bindIP)" class="copy-btn">复制</text>
				</view> -->
			</view>
			<view class="cell">
				<view class="title">{{$t('fzapi')}}</view>
				<view class="tips">{{$t('apikeyhbc')}}</view>
			</view>
			<view class="nr_item" v-if="form.exchangeName == 'OKEX' ">
				<view class="cell">
					<view class="title">*{{$t('qzdmmdy')}}     {{form.passPhrase}}</view>
					<view class="tips">{{$t('dywoyjy')}}</view>
				</view>
			</view>
			<view class="cell">
				<view class="title">{{$t('syhzzt')}}</view>
				<view class="tips">Access Key</view>
				<view class="paste">
					<input
						class="paste-input"
						type="text"
						v-model="form.apiKey"
						:placeholder="$t('qsracckey')"
						placeholder-class="paste-input-place"
						@focus="inputFocus('apiKey')"
						@blur="inputBlur('apiKey')"
					/>
					<text @tap="paste('apiKey')" class="paste-btn">{{$t('zhantie')}}</text>
				</view>
			</view>
			<view class="cell">
				<view class="tips">secret Key</view>
				<view class="paste">
					<input
						class="paste-input"
						type="text"
						v-model="form.secretKey"
						:placeholder="$t('qsrseckey')"
						placeholder-class="paste-input-place"
						@focus="inputFocus('secretKey')"
						@blur="inputBlur('secretKey')"
					/>
					<text @tap="paste('secretKey')" class="paste-btn">{{$t('zhantie')}}</text>
				</view>
			</view>
			<view class="btn-normal" @click="importInfo">{{ form.bindSts == 1 ? $t('xiugai') : $t('daoru') }}</view>
			<view class="import">
				<view class="import-title">{{$t('daorusm')}}</view>
				<view class="import-text">{{$t('zhuyikt')}}</view>
			</view>
		</view>
		<tom-pwd v-if="showPwd" @cancel="showPwd = false" @confirm="saveBindApi"></tom-pwd>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex';
export default {
	data() {
		return {
			form: {
				apiKey: '',
				secretKey: ''
			},
			showPwd: false,
			typebloo: {
				apiKey: true,
				secretKey: true
			},
			bindIP:''
		};
	},
	onLoad() {
		this.form=Object.assign(this.form,this.$store.state.shortData);
		this.bindIP = uni.getStorageSync('bindIP') || '';
	},
	methods: {
		indexData(){
			uni.showLoading({
				mask: true,
				title: this.$t('loading.title')
			});
			this.$api.userApi
				.getExchanges()
				.then(res => {
					// this.pageData = res.data;
					let list=res.data.exchangeList || [];
					this.mescroll.endSuccess(list.length)
					if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list=this.list.concat(list); //追加新数据
					uni.hideLoading();
				}).catch(res =>{
					uni.hideLoading();
				})
		},
		// 粘贴
		paste(key){
			let that=this;
			try{
				uni.getClipboardData({
				    success: function (res) {
						console.log(res)
						that.form[key]=res.data;
				    },
					complete:function(info){
						console.log(info.data)
					}
				})
			}catch(e){
				that.$utils.toast(this.$t('zhentiesb'))
			}
		},
		// 导入
		importInfo(){
			if(this.$u.test.isEmpty(this.form.apiKey)) return this.$utils.toast(this.$t('accbnwk'));
			if(this.$u.test.isEmpty(this.form.secretKey)) return this.$utils.toast(this.$t('secbnwk'));
			this.showPwd=true;
		},
		// 提交
		saveBindApi(e){
			this.showPwd=false;
			this.$api.userApi.saveBindApi({
				apiKey:this.form.apiKey,
				secretKey:this.form.secretKey,	
				exchangeId:this.form.exchangeId,
				transferPassword:e,
			})
			.then(res=>{
				this.$utils.toast(this.$t('czcg'))
				uni.navigateBack();
			})
		},
		inputFocus(e){
			if(this.typebloo[e]){
				this.form[e] = '';
				this.typebloo[e] = false;
			}
			
		},
		inputBlur(e){
			if(this.form[e] == ''){
				console.log(this.$store.state.shortData[e])
				this.form[e]=this.$store.state.shortData[e];
				this.typebloo[e] = true;
			}
			
		},
	},
	
};
</script>

<style lang="scss" scoped>
.cell {
	padding: 30rpx 50rpx;
	border-bottom: 1px solid $tom-text-sub-color3;
	&:first-child {
		border-bottom: none;
	}
	.title {
		color: $tom-text-color;
		font-size: 28rpx;
		// margin-bottom: 30rpx;
	}
	.copy {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		&-text {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 30rpx;
			color: $tom-text-color;
			font-size: 28rpx;
			background-color: rgba(102, 153, 255, 0.1);
		}
		&-btn {
			margin-left: 30rpx;
			color: #fff-primary;
			font-size: 28rpx;
		}
	}
	.tips {
		color: #9999cc;
		font-size: 24rpx;
	}
	.paste {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		&-input {
			flex: 1;
			color: #fff-primary;
			font-size: 24rpx;
			&-place {
				color: #fff-sub-primary;
			}
		}
		&-btn {
			margin-left: 30rpx;
			color: #fff-primary;
			font-size: 28rpx;
		}
	}
}
.btn-normal {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: $text-color;
	border-radius: 8rpx;
	margin: 60rpx;
}
.import {
	margin: 0 $nr-padd;
	padding: 18rpx 30rpx 70rpx 30rpx;
	background-color: rgba(102, 153, 255, 0.1);
	border-radius: 8rpx;
	&-title {
		color: $tom-text-color;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}
	&-text {
		margin-top: 18rpx;
		color: $tom-text-sub-color2;
		font-size: 24rpx;
	}
}
</style>
